<template>
	<view class="content">
		<u-navbar bgColor="#fff" :placeholder="true" :fixed="true" @leftClick="$back" title="dream约文" titleStyle="{'color': '#000'}">
			
		</u-navbar>
		<view class="serbox" @click="$go('/pages/find/search')">
			<image :src="'/images/search.png' | formatImgUrl" class="serpic" mode=""></image>
			<input type="text" class="serput" disabled="true" placeholder="搜圈子、用户、内容">
		</view>
		<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="4000" :duration="1000"
			:circular="true" indicator-active-color="#ffffff">
			<swiper-item v-for="(item,index) in indexData.banner" :key="index" class="swiperwra">
				<image class="imgass" :src="item.logo | formatImgUrl" mode="aspectFill"></image>
			</swiper-item>
		</swiper>

		<view class="pibox">
			<image :src="'/images/ia.png' | formatImgUrl" class="pipic" mode=""></image>
			<view class="picen">
				<view class="pititle">
					快速找到您想要的写手！
				</view>
				<view class="pitxt">
					{{config.vip_dispatch_status == '2'?'限时试用免费派单特权':'购买平台派单特权'}}，新脑洞立刻看
				</view>
			</view>
			
			<!-- <view class="piyou"
				@click="config.vip_dispatch_status == '1'?$go('/pages/index/mate'):paiKefu()">
				写手匹配
			</view> -->
			<view  class="piyou"
				@click="xieshou()">
				写手匹配
			</view>
		
			<!-- task/list/list -->
		</view>
		<view class="tuibox">
			<view class="tuititle">
				推荐写手
			</view>
			<view class="tuiyou" @click="show = true">
				<image :src="'/images/ib.png' | formatImgUrl" class="tuipic" mode=""></image>
				<view class="tuitxt">
					筛选
				</view>
			</view>
		</view>

		<view>
			<view class="empytView" v-if="!list.total">
				<image :src="'/images/kong.png' | formatImgUrl" mode="widthFix" />
				<!-- <view>- 空列表 -</view> -->
			</view>
			<view class="yaobox" v-for="item in writerList" @click="$go('/pages/my/my?id='+item.membe_id)">
				<image :src="item.pic | formatImgUrl" class="yaopic" mode=""></image>
				<view class="yaoyou">
					<view class="yaotitle oneline">
						{{item.username}}
					
						<image
								:src="$options.filters.formatImgUrl(item.writer_level.is_active?item.writer_level.level.image:item.writer_level.level.hide_img)"
								@click="$go('/pages/user/grade?uid='+item.membe_id)" class="jipic" mode="" v-if="item.is_writer">
							</image>
					</view>
					
		
					
					<scroll-view scroll-x="true" class="qianbox">
						<view class="qli" v-for="items in item.writer_diy_tags">
							#{{items}}
						</view>
					</scroll-view>
					
					<view class="zibox">
						<view class="zititle">
							{{item.word_price}}<text>币/{{item.word_count}}</text>
						</view>
						<view class="zitxt">
							已完成{{item.order_count?item.order_count:0}}次约文
						</view>
					</view>
				</view>
			</view>

			<!-- <view class="nomore" v-if="writerList.length && list.current_page == list.last_page">
				没有更多了~
			</view> -->
		</view>

		<u-popup :show="show" mode="bottom" :overlayStyle="{'touch-action':'none'}" @close="close" @open="open">
			<view class="mask">
				<view class="matop" style="height: 700rpx;overflow-y: scroll; overscroll-behavior: none; ">
					<view class="matitle">
						— 请选择想要寻找的写手类型 —
					</view> 
					<view class="bietxt">
						性别
					</view>
					<view class="gebox" >
						<cc-multipleBtn :isSingleSel="false" :colors="colors" :remarkList="sexList"
						           @tagClick="tagsClick2" :flag="1"></cc-multipleBtn>
						<!-- <view v-for="(item,index) in sexList" class="geli li72" :class="{'active': form.sex?item.id == form.sex:index == 0}"
							@click="navTap(item)">
							{{item.name}}
							<view class="line"></view>
						</view> -->
					</view>
					<view class="geetxt">
						价格区间
					</view>
					<view class="gebox">
						<input type="number" v-model="form.min_price" :always-embed="true" :adjust-position="true" placeholder="自定义最低价" cursor-spacing="40" class="geli">
						<input type="number" v-model="form.max_price" :always-embed="true" :adjust-position="true" placeholder="自定义最高价" cursor-spacing="40"  class="geli">
							
					<!-- 	<cc-multipleBtn :isSingleSel="false" :colors="colors" :remarkList="priceList"
							           @tagClick="tagsClick3" :flag="1"></cc-multipleBtn> -->
				
					</view>
					<view class="geetxt">
						写手等级
					</view>
					<view class="dengbox">
						<cc-multipleBtn :isSingleSel="false" :colors="colors" :remarkList="denglist"
						           @tagClick="tagsClick" :flag="0"></cc-multipleBtn>
					</view> 
					
					<view class="geetxt">
						风格
					</view>
					<view class="dengbox">
						<cc-multipleBtn :isSingleSel="false" :colors="colors" :remarkList="fengge"
						           @tagClick="tagsClick1"  :flag="0"></cc-multipleBtn>
					</view> 
				</view>
				
				<view class="madi">
					<view class="masub" @click="screen">
						确认筛选
					</view>
				</view>
			</view>
		</u-popup>
		<tabbar></tabbar>
		
		
		
	</view>
</template>
<script>
	
	import * as db from '@/common/db.js'
	export default {
		data() {
			return {
				is_open:0,
				show1:false,
				colors: 'rgba(69, 196, 176, 0.1)',
				show: false,
				indexData: {},
				userInfo: this.$db.get('userInfo'),
				config:this.$db.get('config'),
				// 推荐列表
				navList: [],
				priceList: [{
					id: 1,
					name: '自定义最低价',
				}, {
					id: 2,
					name: '自定义最高'
				}],
				sexList: [{
					id: 1,
					name: '男',
				}, {
					id: 2,
					name: '女'
				}],
				denglist: [{
					id: 1,
					name: '1-10'
				}, {
					id: 2,
					name: '11-20'
				},{
					id: 3,
					name: '21-30'
				},{
					id: 4,
					name: '31-40'
				},{
					id: 5,
					name: '41-50'
				}],
				deng: 0,
				form:{
					sex:'',
					min_price:'',
					max_price:'',
					fengge:'',
					writer_level:''
					
				},
				fengge: [],
				list: {},
				writerList: [],
				page: 1,
				ac_info:null,
			}
		},
		onLoad() {
			this.page = 1;
			this.writerList = [];
			this.list = [];
			
			this.getIndex()
			this.getWriterList()
		},
		onShow() {
		
			// this.getConfig()
		},
		onPullDownRefresh() {
			setTimeout(function() {
					uni.stopPullDownRefresh(); //停止当前页面下拉刷新	
			}, 800);
				console.log('refresh');
				this.page = 1;
				this.writerList = [];
				this.list = [];
				this.getWriterList();
				
				
		},
		// 上拉加载
		onReachBottom() {
			if (this.list.current_page < this.list.last_page) {
				this.page++; // 页数加一，加载下一页数据
				this.getWriterList();
			}
		},
		methods: {
			xieshou(){
	
				let auth = db.get('auth');
				if (!auth) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return;
				}
				
				
				// this.$common.errorToShow('暂未开放')
				// return
				if(this.is_open == 1){
					uni.navigateTo({
						url: '/task/list/orderlist'
					})
				}else{
					uni.navigateTo({
						url: '/task/list/list'
					})
				}
			},
			getConfig(){
				this.$api.default.request('Common/getConfig', {}, 'GET', false).then((res) => {
					if (res.code) {
						this.$db.set('config', res.data)
						this.config = res.data
					}
				})
			},
			screen(){
				this.show = false
				this.getWriterList()
			},
			getWriterList() {
				this.form['page'] = this.page
				
				this.$api.default.request('index/getWriterList', this.form, 'POST', false).then((res) => {
					if (res.code) {
						this.list = res.data
						if (res.data.current_page > 1) {
							res.data.data.forEach((item) => {
								this.writerList.push(item)
							})
						} else {
							this.writerList = res.data.data
						}
					}
				})
			},
			paiKefu() {
				if (this.config.vip_dispatch_kefu) {
					wx.openCustomerServiceChat({
					  extInfo: {url: this.config.vip_dispatch_kefu},
					  corpId: this.config.vip_dispatch_corp_id,
					  success(res) {
						  console.log(res)
					  },
					  complete(r){
						  console.log('r',r)
					  }
					})
					// uni.navigateTo({
					// 	url: '/pages/webview/webview?url=' + encodeURIComponent(this.config.vip_dispatch_kefu)
					// })
				} else {
					this.$common.errorToShow('客服链接错误，请联系管理员')
				}
			},
			getUserInfo() {
				this.$api.default.request('user/userInfo', {}, 'GET', false).then((res) => {
					if (res.code) {
						this.userInfo = res.user
					}
				})
			},
			getIndex() {
				var _this = this;
				this.$api.default.request('index/index', {}, 'GET', false).then((res) => {
					if (res.code) {
					
						_this.indexData = res.data
							console.log(res,666)
						_this.fengge = res.data.tags
						_this.is_open = res.data.is_open
						// this.denglist = res.data.denglist
					}
				})
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			navTap(item) {
				this.form.sex = item.id
			},
			dengTap(index) {
				this.deng = index
			},
			tagsClick(tagArr, arr) {
					// 选中数据有变化 重新赋值（可以兼容小程序）
				this.denglist = arr;
				// uni.showModal({
				// 	title: '选中的标签',
				// 	content: '选中的标签 = ' + JSON.stringify(tagArr)
				// })
				var ids = "";
				for(var i=0;i<tagArr.length;i++){
					var arr = tagArr[i];
					if(i == 0){
						ids = ""+arr.id;
					}else{
						ids = ids+',' + arr.id;
					}
				}
				this.form.writer_level = ids
			
			},
			tagsClick1(tagArr, arr) {
				this.fengge = arr;
				var ids = "";
				for(var i=0;i<tagArr.length;i++){
					var arr = tagArr[i];
					if(i == 0){
						ids = ""+arr.id;
					}else{
						ids = ids+',' + arr.id;
					}
				}
				this.form.fengge = ids
			},
			tagsClick2(tagArr, arr) {
				this.sexList = arr;
				var ids = "";
				for(var i=0;i<tagArr.length;i++){
					var arr = tagArr[i];
					if(i == 0){
						ids = ""+arr.id;
					}else{
						ids = ids+',' + arr.id;
					}
				}
				this.form.sex = ids
			}
		}
	}
</script>

<style lang="scss">
	
	.content {
		.jipic{
			width: 41px;
			height:19px;
			position: relative;
			left: 10rpx;
			top:10rpx
		}
		
		
		.cl1{
				height: 70rpx;
				width: 70rpx;;
				position: relative;
				top:120rpx;
		}
		.zhezhao{
			height: 100vh;
			position: fixed;
			top:0rpx;
			right:0px;
			width: 100%;
			z-index:101;
			background: rgba(51, 51, 51, 0.6);
		}
		.biaoqian{
			position: fixed;
			float: left;
			top:18%;
			z-index:102;
			border-radius: 0.5em;
			background: #fff;
			width: 80%;
			margin-left: 5%;
			text-align: center;
			.top{
				padding-top: 60rpx;
				font-size: 36rpx;
				color: #000;
				float: left;
			    text-align: center;
				width: 80%;
				margin-left: 10%;
			}
			
			.tab{
				padding-top: 28rpx;
				font-size: 25rpx;
				font-weight: 700;
				width:90%;
				margin-left: 5%;
				float: left;
				text-align: center;
				view{
					background: rgba(153, 153, 153, 0.2);
					padding: 2rpx 20rpx 2rpx 20rpx;
					margin-left: 16rpx;
					border-radius: 0.5em;
					text-align: center;
					float: left;
				}
			}
			
			.not_like{
				width: 100%;
				text-align: center;
				float: left;
				color:#999;
				font-size: 27rpx;
				margin-top:40rpx;
			}
			
			.line{
				margin-top:30rpx;
				width:88%;
				margin-left:6%;
				float: left;
				height: 0px;
				opacity: 1;
				border: 1rpx solid rgba(153, 153, 153, 0.1);
			}
			.cont_t{
				border-radius: 8px;
				opacity: 1;
				background: rgba(69, 196, 176, 0.05);
				float: left;
				width: 88%;
				height: 86rpx;
				margin-left: 6%;
				text-align: center;
				margin-top: 30rpx;
				color: #45C4B0;
				.t1{
					width: 50%;
					margin: 0 auto;
					margin-top: 20rpx;
					image{
						width:43rpx;;
						height: 43rpx;
						float: left;
					}
					.tex{
						 float: left;
						 margin-left: 10rpx;
					}
				}
			
			}
			.cont_b{
				float: left;
				width: 100%;
				text-align: center;
				margin-top: 20rpx;
				
				background: rgba(69, 196, 176, 0.05);
				float: left;
				width: 88%;
				height: 86rpx;
				margin-left: 6%;
				color: #45C4B0;
				.t1{
					width: 50%;
					margin: 0 auto;
					margin-top: 20rpx;
					image{
						width:43rpx;;
						height: 43rpx;
						float: left;
					}
					.tex{
						 float: left;
						 margin-left: 10rpx;
					}
				}
				
				
			}
			
			
			
			
			
		}
		
		
		 padding: 20rpx 30rpx;
		.serbox {
			display: flex;
			align-items: center;
			background: #F8F8F8;
			border-radius: 142px;
			height: 72rpx;
			padding: 0 26.66rpx;
			margin-bottom: 20rpx;

			.serpic {
				width: 32rpx;
				height: 32rpx;
				flex-shrink: 0;
			}

			.serput {
				padding: 0 16rpx;
				width: 500rpx;
				font-size: 28rpx;
				color: #333333;
			}
		}

		.swiper {
			width: 100% !important;
			height: 160rpx !important;
			position: relative;
			border-radius: 8px;
			margin-bottom: 20rpx;

			.swiperwra {
				border-radius: 16rpx;

				.imgass {
					width: 100% !important;
					height: 160rpx !important;
				}
			}

		}

		.pibox {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-radius: 8px;
			height: 100rpx;
			padding: 0 20rpx;
			background: rgba(69, 196, 176, 0.1);
			margin-bottom: 20rpx;

			.pipic {
				width: 58rpx;
				height: 60rpx;
				flex-shrink: 0;
			}

			.picen {
				padding: 0 20rpx;
				flex-grow: 1;

				.pititle {
					font-size: 28rpx;
					font-weight: bold;
					color: #45C4B0;
					padding-bottom: 5rpx;
				}

				.pitxt {
					font-size: 20rpx;
					color: #999999;
				}
			}

			.piyou {
				width: 152rpx;
				height: 60rpx;
				border-radius: 142px;
				text-align: center;
				line-height: 60rpx;
				background: #45C4B0;
				font-size: 28rpx;
				color: #ffffff;
			}
		}

		.tuibox {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.tuititle {
				font-size: 32rpx;
				font-weight: bold;
				color: #3D3D3D;
			}

			.tuiyou {
				display: flex;
				align-items: center;
				justify-content: flex-end;

				.tuipic {
					width: 34rpx;
					height: 32rpx;
				}

				.tuitxt {
					font-size: 28rpx;
					color: #999999;
					padding-left: 10rpx;
				}
			}
		}

		.yaobox {
			padding: 20rpx 0;
			border-bottom: 1px solid rgba(153, 153, 153, 0.1);
			display: flex;
			align-items: center;

			.yaopic {
				width: 148rpx;
				height: 148rpx;
				border-radius: 50%;
				flex-shrink: 0;
			}

			.yaoyou {
				padding: 0 20rpx;
				width: 500rpx;

				.yaotitle {
					font-size: 28rpx;
					color: #3D3D3D;
					padding-bottom: 12rpx;
				}

				.qianbox {
					white-space: nowrap;
					padding-bottom: 16rpx;

					.qli {
						// background: rgba(153, 153, 153, 0.1);
						background: rgba(153, 153, 153, 0.102);
						padding: 2px 8px 2px 6px;
						border-radius: 89px;
						font-family: 思源黑体;
						font-size: 12px;
						// font-weight: bold;
						color: #999;
						margin-right: 16rpx;
						display: inline-block;
					}
				}

				.zibox {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.zititle {
						font-size: 32rpx;
						font-weight: bold;
						color: #45C4B0;

						text {
							padding-left: 8rpx;
							font-size: 20rpx;
							color: #999999;
						}
					}

					.zitxt {
						font-size: 20rpx;
						color: #999999;
					}
				}
			}
		}

		.mask {
			background-color: #F2F5F2;
			border-radius: 8px 8px 0 0;

			.matop {
				background-color: #ffffff;
				margin-bottom: 20rpx;
				padding: 40rpx 30rpx 28rpx;

				.matitle {
					line-height: 40rpx;
					font-size: 28rpx;
					font-weight: bold;
					text-align: center;
					letter-spacing: 0em;
					color: #3D3D3D;
					padding-bottom: 20rpx;
				}

				.bietxt {
					padding-bottom: 8rpx;
					line-height: 40rpx;
					font-size: 28rpx;
					font-weight: bold;
				}

				.geetxt {
					padding-bottom: 8rpx;
					padding-top: 16rpx;
					line-height: 40rpx;
					font-size: 28rpx;
					font-weight: bold;
				}

				.gebox {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.geli {
						width: 326rpx;
						height: 52rpx;
						overflow: hidden;
						border-radius: 178rpx;
						opacity: 1;
						background: rgba(153, 153, 153, 0.1);
						font-size: 22rpx;
						font-weight: normal;
						text-align: center;
						letter-spacing: 0em;
						color: #999999;
						margin-bottom: 12rpx;
					}
					.li72{
						line-height: 72rpx;
					}
					.active {
						background: rgba(69, 196, 176, 0.1);
						color: #45C4B0;
					}
				}

				.dengbox {
					// display: flex;
					// align-items: center;
					// flex-wrap: wrap;

					// .dengli {
					// 	width: 204rpx;
					// 	height: 72rpx;
					// 	border-radius: 178px;
					// 	opacity: 1;
					// 	background: rgba(153, 153, 153, 0.1);
					// 	line-height: 72rpx;
					// 	font-size: 32rpx;
					// 	font-weight: normal;
					// 	text-align: center;
					// 	letter-spacing: 0em;
					// 	color: #999999;
					// 	margin-bottom: 12rpx;
					// 	margin-right: 39rpx;
					// }

					// .dengli:nth-child(3n) {
					// 	margin-right: 0;
					// }

					// .active {
					// 	background: rgba(69, 196, 176, 0.1);
					// 	color: #45C4B0;
					// }
				}
			}

			.madi {
				width: 100%;
				height: 120rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				opacity: 1;

				background: #FFFFFF;

				.masub {
					width: 630rpx;
					height: 80rpx;
					border-radius: 8px;
					opacity: 1;
					background: #45C4B0;
					font-size: 32rpx;
					font-weight: bold;
					text-align: center;
					letter-spacing: 0em;
					color: #FFFFFF;
					line-height: 80rpx;
				}
			}
		}

		.u-popup__content.data-v-52d4ddd1 {
			border-radius: 8px 8px 0 0;
			overflow: hidden;
		}
		
		 .cencal_order {
		        padding: 20upx 4%;
		        background-color: #fff;
		    }
		
		    .remark {
		        background-color: #F5F5F5;
		        border-radius: 10upx;
		        height: 40vw;
		        padding: 20upx;
		        margin-top: 20upx;
		
		        textarea {
		            font-size: 26upx;
		            color: #797979;
		        }
		    }
		
		    .textarea_p {
		        font-size: 24upx;
		        color: #797979;
		    }
		
		    .btns {
		        width: 100%;
		        height: 80upx;
		        line-height: 80upx;
		        font-size: 30upx;
		        color: #333;
		        text-align: center;
		        margin-top: 100upx;
		        border-radius: 8upx;
		    }
	}
</style>